import React, { useState } from 'react';
import useStore from '../../../components/useStore';
import request from '../../../untils/request';

const AddCustomer = () => {
    const { collapsed } = useStore();
    const [customerName, setCustomerName] = useState('');
    const [phone, setPhone] = useState('');
    const [message, setMessage] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);

    // 处理表单提交
    const handleSubmit = async (e) => {
        e.preventDefault();
        
        // 简单验证
        if (!customerName.trim()) {
            setMessage('请输入客户名称');
            return;
        }

        if (!phone.trim()) {
            setMessage('请输入负责人联系方式');
            return;
        }
        
        try {
            setIsSubmitting(true);
            setMessage('');
            
            // 发送请求到后端
            await request("/admin/customer/add",{
                method:"POST",
                body:{
                    name:customerName,
                    phone:phone
                }
            }).then((res)=>{
                if (res.code === 200) {
                    setMessage('客户添加成功！');
                    setCustomerName(''); // 清空输入框
                    // 3秒后清除成功提示
                    setTimeout(() => setMessage(''), 3000);
                } else {
                    setMessage(res.msg || '添加失败，请重试');
                }
            })
        } catch (error) {
            setMessage('网络错误，请稍后重试');
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <div style={{    
            height: "94%", 
            backgroundColor: `#F1F1F1`,
            right: "1%",
            top: "4vh",
            overflow: "auto",
            width: collapsed ? "94%" : "84%", 
            position: "absolute",  
            color: "white", 
            fontSize: "0.8rem"
        }}>
            <div style={styles.kshcontainer}>
                <div style={styles.header}>
                    <h2>新增客户</h2>
                </div>
                
                <form onSubmit={handleSubmit} style={styles.formContainer}>
                    <div style={styles.formGroup}>
                        <label style={styles.label}>
                            客户名称 
                            <span style={styles.required}>*</span>
                        </label>
                        <input
                            type="text"
                            value={customerName}
                            onChange={(e) => setCustomerName(e.target.value)}
                            style={styles.input}
                            placeholder="请输入客户名称"
                            disabled={isSubmitting}
                            maxLength={50}
                        />
                    </div>

                    <div style={styles.formGroup}>
                        <label style={styles.label}>
                            负责人联系方式 
                            <span style={styles.required}>*</span>
                        </label>
                        <input
                            type="text"
                            value={phone}
                            onChange={(e) => setPhone(e.target.value)}
                            style={styles.input}
                            placeholder="请输入负责人联系方式"
                            disabled={isSubmitting}
                            maxLength={11}
                        />
                    </div>
                    
                    {message && (
                        <div style={message.includes('成功') ? styles.successMsg : styles.errorMsg}>
                            {message}
                        </div>
                    )}
                    
                    <div style={styles.buttonGroup}>
                        <button 
                            type="submit" 
                            style={styles.submitBtn}
                            disabled={isSubmitting}
                        >
                            {isSubmitting ? '提交中...' : '提交'}
                        </button>
                        <button 
                            type="button" 
                            style={styles.cancelBtn}
                            onClick={() => {
                                setCustomerName('');
                                setMessage('');
                            }}
                            disabled={isSubmitting}
                        >
                            取消
                        </button>
                    </div>
                </form>
            </div>
        </div>
    )
}

export default AddCustomer

var styles = {
    kshcontainer: {
        width: "98%", 
        height: "95%", 
        position: "absolute", 
        top: "3%", 
        left: "1%", 
        backgroundColor: "white", 
        color: "black",
        borderRadius: "10px",
        boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
    },
    header: {
        padding: "1rem 2%",
        borderBottom: "1px solid #eee",
        marginBottom: "1.5rem"
    },
    formContainer: {
        width: "96%",
        margin: "0 auto",
        padding: "0 2%"
    },
    formGroup: {
        marginBottom: "1.5rem"
    },
    label: {
        display: "block",
        marginBottom: "0.5rem",
        fontSize: "0.9rem",
        color: "#333"
    },
    required: {
        color: "#ff4d4f"
    },
    input: {
        width: "100%",
        padding: "8px 12px",
        borderRadius: "4px",
        border: "1px solid #d9d9d9",
        fontSize: "0.9rem",
        boxSizing: "border-box"
    },
    successMsg: {
        color: "#52c41a",
        padding: "8px 0",
        fontSize: "0.85rem",
        marginBottom: "1rem"
    },
    errorMsg: {
        color: "#ff4d4f",
        padding: "8px 0",
        fontSize: "0.85rem",
        marginBottom: "1rem"
    },
    buttonGroup: {
        display: "flex",
        gap: "1rem",
        marginTop: "2rem"
    },
    submitBtn: {
        padding: "8px 16px",
        backgroundColor: "#1890ff",
        color: "white",
        border: "none",
        borderRadius: "4px",
        cursor: "pointer",
        fontSize: "0.9rem"
    },
    cancelBtn: {
        padding: "8px 16px",
        backgroundColor: "#f5f5f5",
        color: "#333",
        border: "1px solid #d9d9d9",
        borderRadius: "4px",
        cursor: "pointer",
        fontSize: "0.9rem"
    }
}
